<template>

  <el-switch v-if="'switch' === field.type"
             v-model="model"
             :active-icon="Check"
             :inactive-icon="Close"
             inline-prompt
  />

  <el-radio-group v-if="'radio' === field.type"
                  v-model="model"
  >
    <el-radio v-for="item in data"
              :label="item.label"
              :value="item.value"
    />
  </el-radio-group>

  <el-checkbox-group v-if="'checkbox' === field.type"
                     v-model="model"
  >
    <el-checkbox v-for="item in data"
                 :label="item.label"
                 :value="item.value"
    />
  </el-checkbox-group>

  <el-input v-if="'input,textarea,text,password'.includes(field.type)"
            v-model="model"
            :disabled="field.disabled"
            :maxlength="field.maxlength"
            :minlength="field.minlength"
            :placeholder="field.placeholder"
            :readonly="field.readonly"
            :style="{width: `${(field.width || 300) + 'px'}`}"
            :type="field.type"
            clearable
  />

  <el-input-number v-if="'number' === field.type"
                   v-model="model"
                   :disabled="field.disabled"
                   :max="field.max"
                   :min="field.min"
                   :placeholder="field.placeholder"
                   :readonly="field.readonly"
                   :style="{width: `${(field.width || 300) + 'px'}`}"
  />

  <el-select v-if="'select'.includes(field.type)"
             v-model="model"
             :multiple="field.multiple"
             :options="data"
             :placeholder="field.placeholder"
             :props="field.props"
             :style="{width: `${(field.width || 300) + 'px'}`}"
             clearable
  />

  <el-tree-select v-if="'tree'.includes(field.type)"
                  v-model="model"
                  :data="data"
                  :multiple="field.multiple"
                  :node-key="'value'"
                  :props="field.props"
                  :style="{width: `${(field.width || 300) + 'px'}`}"
                  clearable
  />

  <el-cascader v-if="'cascader' === field.type"
               v-model="model"
               :multiple="field.multiple"
               :options="data"
               :placeholder="field.placeholder"
               :props="field.props"
               :style="{width: `${(field.width || 300) + 'px'}`}"
               clearable
  />

  <el-time-picker v-if="'timepicker,timerange'.includes(field.type)"
                  v-model="model"
                  :is-range="'timerange' === field.type"
                  :placeholder="field.placeholder"
                  :style="{width: `${(field.width || 300) + 'px'}`}"
                  clearable
  />

  <el-date-picker v-if="'year,month,date,datetime,week,datetimerange,daterange'.includes(field.type)"
                  v-model="model"
                  :placeholder="field.placeholder"
                  :shortcuts="shortcuts"
                  :style="{width: `${(field.width || 300) + 'px'}`}"
                  :type="field.type"
                  clearable
  />

</template>

<script setup>

import {Check, Close} from "@element-plus/icons-vue";

defineOptions({
  name: 'JeesdpFormField',
})

defineProps({
  field: {
    type: Object,
    required: true
  },
  data: {
    type: Array,
  },
  url: {
    type: String,
  },
});

const model = defineModel();

const shortcuts = [
  {
    text: '前一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: '前一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: '前三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
  {
    text: '前半年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 6)
      return [start, end]
    },
  },
  {
    text: '前一年',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 12)
      return [start, end]
    },
  }, {
    text: '后一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setDate(end.getDate() + 7)
      return [start, end]
    },
  }, {
    text: '后一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setMonth(end.getMonth() + 1)
      return [start, end]
    },
  }, {
    text: '后三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setMonth(end.getMonth() + 3)
      return [start, end]
    },
  }, {
    text: '后半年',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setMonth(end.getMonth() + 6)
      return [start, end]
    },
  }, {
    text: '后一年',
    value: () => {
      const end = new Date()
      const start = new Date()
      end.setMonth(end.getMonth() + 12)
      return [start, end]
    },
  },
]
</script>

<style scoped>

</style>
